<template>
  <div 
    class="component"
    @touchmove.stop.prevent="touchMove"
    >
    <van-overlay 
      :show="showPanel"
      @click="changePanel(false)" 
      duration="500" />
    <div 
      class="button flex-row"
      :class="{'hide-button': showPanel}"
      @click="changePanel(false)"
      >
      <van-icon
        name="shop-o"
        size="48rpx"
        color="#ffffff"
        />
    </div>
    <div 
      class="panel flex-row"
      :class="{'hide-panel': !showPanel}"
      >
      <div class="panel-content content" >FILTER</div>
      <div class="first ring flex-row">
        <filter-panel
          :outerDiameter="firstDiameter"
          :innerDiameter="secondDiameter"
          :icons="first"
          :iconSize="iconSize"
          :defaultSelected="pageSelected"
        />
        <div class="second ring flex-row">
          <filter-panel 
            :outerDiameter="secondDiameter"
            :innerDiameter="thridDiameter"
            :icons="second"
            :iconSize="iconSize"
            :defaultSelected="starSelected"
            isStar=true
            />
          <div class="third ring flex-row">
            <div
              class="core ring flex-row"
              @click="changePanel(true)"
              >
              <div class="core-content content">OK</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from 'vuex'
export default {
  props: {
    first: {
      type: Array,
      required: true
    },
    pageSelected: {
      type: Number,
      required: true
    },
    starSelected: {
      type: Number,
      required: true
    },
    returnMode: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      showPanel: false,
      iconSize: "60rpx",
      second: [
        {
          icon: "star-o",
          selectIcon: "star",
          text: "MIN",
          id: 1
        },
        {
          icon: "star-o",
          selectIcon: "star",
          text: "MIN",
          id: 2
        },
        {
          icon: "star-o",
          selectIcon: "star",
          text: "MIN",
          id: 3
        },
        {
          icon: "star-o",
          selectIcon: "star",
          text: "MIN",
          id: 4
        },
        {
          icon: "star-o",
          selectIcon: "star",
          text: "MIN",
          id: 5
        }
      ],
      firstDiameter: 1150,
      secondDiameter: 850,
      thridDiameter: 500,
      coreDiameter: 350,
    }
  },
  methods: {
    changePanel(confirm) {
      if (!this.returnMode) {
        this.showPanel = !this.showPanel
        this.$emit('changeFilter', confirm)
      } else {
        this.$emit('cancelCard')
      }
    },
    touchMove() {
    }
  },
}
</script>

<style lang="less" scoped>
@button-diameter: 100rpx;
@panel-diameter: 1500rpx;
@first-diameter: 1150rpx;
@second-diameter: 850rpx;
@third-diameter: 500rpx;
@core-diameter: 350rpx;
@button-color: #f7bb40;
@panel-color: #ffffff;
@border-color:#cccccc;
.component {
  pointer-events: auto;
  .button {
    width: @button-diameter ;
    height: @button-diameter;
    background-color: @button-color;
    border-radius: 50%;
    position: fixed;
    bottom: 70rpx;
    left: 50%;
    transform: translateX(-50%) scale(1);
    // transform-origin: left bottom;
    transition: .5s all ease-in-out;
  }
  .hide-button {
    transform: translateX(-50%) scale(0);
  }
  .panel {
    width: @panel-diameter;
    height: @panel-diameter;
    border-radius: 50%;
    position: fixed;
    bottom: -60rpx;
    left: 50%;
    transition: 0.5s all ease-in-out;
    // bottom: -20%;
    // left: 0;
    transform: translate(-50%, 50%) scale(1);
    // transform-origin: left bottom;
    background-color: @panel-color;
    z-index: 2;
    .content {
      position: absolute;
      transition: .5s all ease-in-out;
    }
    .ring {
      border-radius: 50%;
      border: 1px solid @border-color;
    }
    filter-panel {
      position: absolute;
      pointer-events: none;
    }
    .panel-content {
      top: 75rpx;
    }
    .first {
      width: @first-diameter;
      height: @first-diameter;
      .second {
        width: @second-diameter;
        height: @second-diameter;
        .second-content {
          top: 400rpx;
        }
        .third {
          width: @third-diameter;
          height: @third-diameter;
          .third-content {
            top: 515rpx
          }
          .core {
            width: @core-diameter;
            height: @core-diameter;
            background-color: orange;
            .core-content {
              top: 625rpx;
              font-weight: 500;
              font-size: 40rpx;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .hide-panel {
    transform: translate(-50%, 50%) scale(0);
  }
}
</style>